<template>
  <div class="contain">
    <defaultSlot title="美食" :listdata="foods">
      <!-- 插槽加了name属性后可以在标签指定要放在那个插槽里面 -->
      <img slot="center" src="./assts/2-4-1.jpg" alt="">
      <a slot="fooder" href="javascript:;">更多美食</a>
    </defaultSlot>

    <defaultSlot title="游戏" :listdata="games">
      <ul slot="center">
        <li  v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>

      <div class="contain" slot="fooder">
        <a href="javascript:;">网络游戏</a>
        <a href="javascript:;">单击游戏</a>
      </div>
    </defaultSlot>

    <defaultSlot title="电影" :listdata="films">
      <ul slot="center">
        <li v-for="(item,index) in films" :key="index">{{item}}</li>
      </ul>
      <h3 slot="fooder">欢迎来看电影</h3>
    </defaultSlot>
  </div>

</template>

<script>
import defaultSlot from './components/defaultSlot.vue'
// import NameSlot from './components/NameSlot.vue'

export default {
  name: 'App',
  data() {
    return {
      foods:['火锅','冰淇淋','草莓蛋糕','麻辣小龙虾','猪肚汤'],
      games:['王者荣耀','穿越火线','全名吃鸡'],
      films:['《菜菜在哪》','《等待菜菜》','《菜菜爱哭》','《一个小朋友叫菜菜》'],
    }
  },
  components:{defaultSlot},
}
</script>

<style>
  .contain{
      /* background-color: palegreen; */
      display: flex;
      justify-content:space-around;
      text-align: center;
  }
  img{
    width:100%;
  }
  
</style>
